<template>
    <div class="view-container">

        <header-module left-custom padding>
            <template #left-con>
                <div>

                    <span v-if="datas.taskType == 1">区域招商</span>
                    <span v-else-if="datas.taskType == 2">精细招商</span>
                    <span v-else-if="datas.taskType == 3">终端直销</span>
                    <span v-else-if="datas.taskType == 4">商业营销</span>

                    <span class="view-title">{{datas.taskNo}}</span>

                    <el-tag size="small" type="warning">
                        {{ getLabel('allocation_status', datas.ifAccept) }}
                    </el-tag>

                </div>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
                <el-button
                        v-if="datas.ifAccept == 0 && userInfo.ID == datas.headId"
                        lass="main-btn" size="small" type="primary" @click="onConfirm">确认
                </el-button>

            </template>

        </header-module>

        <div class="main-content">

            <information-view :allocation="datas"/>

            <el-tabs v-model="activeName" class="elTabs" @tab-click="handleClick">
                <el-tab-pane label="已分配信息" name="allocationView">
                    <allocation-view :datas="datas"/>
                </el-tab-pane>

            </el-tabs>

        </div>

    </div>
</template>

<script>
    import {crmStore} from "../../../../../store";
    import { useRouter, useRoute } from 'vue-router'
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "index",
        components:{
            allocationView:defineAsyncComponent(
                ()=>import('./modules/allocationView.vue')
            ),
            informationView:defineAsyncComponent(
                ()=>import('./modules/informationView.vue')
            )
        },
        setup(){
            const route = useRoute()
            const router = useRouter()
            const userInfo = crmStore.getters['user/userInfo']
            const currentInstance = getCurrentInstance()
            const api = inject('api')

            var data = reactive({
                datas:{},
                activeName:'allocationView'
            })

            const onBack = () => {
                router.back()
            }

            const onConfirm = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '确认任务后任务状态将变更为进行中',
                        title: '确认',
                    })
                    .then(() => {
                        api.task.TASK_ALLOCATION_AGENT_DEAL(data.datas.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'确认成功'})

                                getData()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const getData = () => {
                api.task.TASK_ALLOCATION_AGENT_DETAIL(route.query.id).then(res=>{
                    if (!res.code){
                        data.datas = res.data
                    }else {
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const handleClick = () => {

            }

            onMounted(()=>{
                getData()
            })

            return{
                ...toRefs(data),
                userInfo,

                onBack,
                onConfirm,
                handleClick,
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .view-title{
        margin:  0 20px;
        font-size: $font-size-title;
    }
</style>
